<!DOCTYPE html>
<html lang="en">

<head>
    <title>工作台</title>
    <!--=include _head.html  -->
</head>
<!-- 
 名称：工作台
 用途：适用于展示相关工作进度的全貌、这里以技术岗事务（项目、任务、bug管理）、公司日常事务（审批、待办）
 概览：项目数、任务数量、bug数量
 列表：我参与的项目、今日任务待办、明日待办、
 -->

<body class="fa-layout layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card fa-card-1 fa-intro " data-intro-order=1 data-intro-desc="你好你好哈哈">
                <div class="layui-card-header">
                    我的项目<span class="layui-badge layui-bg-orange">年</span>
                </div>
                <div class="layui-card-body">
                    <h1>10</h1>
                    <p>总项目数量<span>50 个</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card fa-card-1">
                <div class="layui-card-header">
                    我的任务<span class="layui-badge layui-bg-green">待处理</span>
                </div>
                <div class="layui-card-body">
                    <h1>20</h1>
                    <p>累计处理任务<span>1050 个</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card fa-card-1">
                <div class="layui-card-header">
                    Bug量<span class="layui-badge layui-bg-red">月</span>
                </div>
                <div class="layui-card-body">
                    <h1>0</h1>
                    <p>累计bug数量<span>500 个</span></p>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card fa-card-1">
                <div class="layui-card-header">
                    绩效<span class="layui-badge layui-bg-cyan">月</span>
                </div>
                <div class="layui-card-body">
                    <h1>80%</h1>
                    <p>季度绩效<span>96%</span></p>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="fa-card-2 " onclick='router({url:"5xx.html",title:"好好工作",target:"TAB"})'>
                        <em class="layui-icon layui-icon-picture fa-color-olive"></em>
                        <span>图床</span>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3 fa-intro" data-intro-order=3 data-intro-desc="点击这里可以进入项目日历">
                    <div class="fa-card-2 ">
                        <em class="layui-icon layui-icon-date fa-color-maroon"></em>
                        <span>日历</span>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="fa-card-2">
                        <em class="layui-icon layui-icon-util fa-color-black"></em>
                        <span>工具箱</span>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="fa-card-2">
                        <em class="layui-icon layui-icon-log fa-color-orange"></em>
                        <span>记录</span>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-sm6">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="fa-card-2">
                        <em class="iconfont icon-peizaizhuangche fa-color-purple"></em>
                        <span>配车</span>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="fa-card-2">
                        <em class="iconfont icon-kaifa-xianxing"></em>
                        <span>开发</span>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="fa-card-2">
                        <em class="iconfont icon-xunjianjianyan fa-color-green"></em>
                        <span>检查</span>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="fa-card-2">
                        <em class="iconfont icon-jiankongshexiangtou fa-color-blue"></em>
                        <span>监控</span>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">Bug列表</div>
                <ul class="fa-todolist">
                    <li class="checked">
                        <div><input type="checkbox" /></div>
                        <p>问题标题问题标题问题标题问题标</p>
                        <span><cite>2021-02-23</cite><img src="./images/avatar.jpeg" alt="avatar"></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>支付页面总是提示支付失败</p>
                        <span><cite>2021-02-23</cite><img src="./images/avatar.jpeg" alt="avatar"></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>手机打开App异常退出</p>
                        <span><cite>2021-01-23</cite><img src="./images/avatar.jpeg" alt="avatar"></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>无法登陆170手机号段</p>
                        <span><cite>2020-02-21</cite><img src="./images/avatar.jpeg" alt="avatar"></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>无法重现的问题单比较严重</p>
                        <span><cite>2020-02-23</cite><img src="./images/avatar.jpeg" alt="avatar"></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>不得不说的事实</p>
                        <span><cite>2020-02-20</cite><img src="./images/avatar.jpeg" alt="avatar"></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>不得不说的事实</p>
                        <span><cite>2020-02-20</cite><img src="./images/avatar.jpeg" alt="avatar"></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>不得不说的事实</p>
                        <span><cite>2020-02-20</cite><img src="./images/avatar.jpeg" alt="avatar"></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>不得不说的事实</p>
                        <span><cite>2020-02-20</cite><img src="./images/avatar.jpeg" alt="avatar"></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-col-md4 ">
            <div class="layui-card fa_intro">
                <div class="layui-card-header">今日任务</div>
                <ul class="fa-todolist">
                    <li class="checked">
                        <div><input type="checkbox" /></div>
                        <p>问题标题问题标题问题标题问题标</p>
                        <span><cite>2021-02-23</cite></span>
                    </li>
                    <li class="checked">
                        <div><input type="checkbox" /></div>
                        <p>支付页面总是提示支付失败</p>
                        <span><cite>2021-02-23</cite></span>
                    </li>
                    <li class="checked">
                        <div><input type="checkbox" /></div>
                        <p>手机打开App异常退出</p>
                        <span><cite>2021-01-23</cite></span>
                    </li>
                    <li class="checked">
                        <div><input type="checkbox" /></div>
                        <p>无法登陆170手机号段</p>
                        <span><cite>2020-02-21</cite></span>
                    </li>
                    <li class="checked">
                        <div><input type="checkbox" /></div>
                        <p>无法重现的问题单比较严重</p>
                        <span><cite>2020-02-23</cite></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>不得不说的事实</p>
                        <span><cite>2020-02-20</cite></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>不得不说的事实</p>
                        <span><cite>2020-02-20</cite></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>不得不说的事实</p>
                        <span><cite>2020-02-20</cite></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>不得不说的事实</p>
                        <span><cite>2020-02-20</cite></span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-header">明日任务</div>
                <ul class="fa-todolist">
                    <li class="checked">
                        <div><input type="checkbox" /></div>
                        <p>问题标题问题标题问题标题问题标</p>
                        <span><cite>2021-02-23</cite></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>支付页面总是提示支付失败</p>
                        <span><cite>2021-02-23</cite></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>手机打开App异常退出</p>
                        <span><cite>2021-01-23</cite></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>无法登陆170手机号段</p>
                        <span><cite>2020-02-21</cite></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>无法重现的问题单比较严重</p>
                        <span><cite>2020-02-23</cite></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>不得不说的事实</p>
                        <span><cite>2020-02-20</cite></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>不得不说的事实</p>
                        <span><cite>2020-02-20</cite></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>不得不说的事实</p>
                        <span><cite>2020-02-20</cite></span>
                    </li>
                    <li class="">
                        <div><input type="checkbox" /></div>
                        <p>不得不说的事实</p>
                        <span><cite>2020-02-20</cite></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12 fa-intro" data-intro-order=2 data-intro-desc="33333">
            <div class="layui-card">
                <div class="layui-card-header">项目进度</div>
                <div class="layui-card-body">
                    <div class="layui-form">
                        <table class="layui-table">
                            <colgroup>
                                <col width="100">
                                <col width="200">
                                <col width="120">
                                <col width="120">
                                <col width="100">
                                <col>
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>项目编号</th>
                                    <th>项目名称</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th>状态</th>
                                    <th>进度</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>001</td>
                                    <td>fish-admin</td>
                                    <td>1989-10-14</td>
                                    <td>1989-10-14</td>
                                    <td><span class="layui-badge layui-bg-orange">进行中</span></td>
                                    <td>
                                        <div class="layui-progress">
                                            <div class="layui-progress-bar layui-bg-red" lay-percent="50%"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>002</td>
                                    <td>fish-admin</td>
                                    <td>1989-10-14</td>
                                    <td>1989-10-14</td>
                                    <td><span class="layui-badge layui-bg-orange">进行中</span></td>
                                    <td>
                                        <div class="layui-progress">
                                            <div class="layui-progress-bar layui-bg-red" lay-percent="40%"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>003</td>
                                    <td>fish-fast</td>
                                    <td>1989-10-14</td>
                                    <td>1989-10-14</td>
                                    <td><span class="layui-badge layui-bg-green">完结</span></td>
                                    <td>
                                        <div class="layui-progress">
                                            <div class="layui-progress-bar layui-bg-red" lay-percent="100%"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>004</td>
                                    <td>fish-clound</td>
                                    <td>1989-10-14</td>
                                    <td>1989-10-14</td>
                                    <td><span class="layui-badge">延迟</span></td>
                                    <td>
                                        <div class="layui-progress">
                                            <div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>

            </div>
        </div>
    </div>
</body>
<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use(['element', 'fa_intro'], function () {
        var element = layui.element;
        let intro = layui.fa_intro;
        let steps = [];
        let o;
        document.querySelectorAll('.fa_intro').forEach((x, i) => {
            steps.push({ ele: x, intro: "我是第" + i + "步骤" });
            o = x;
        });
        intro.setOptions({});
        intro.start();
    });
</script>

</html>